<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>02-打地鼠.html</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      list-style: none;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }

    li {
      width: 400px;
      height: 300px;

      border: 1px solid #000;

      position: relative;

      overflow: hidden;

    }

    img {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }

    /* 泥土 */
    .dirt {
      z-index: 100;

      background-image: linear-gradient(to bottom,
          transparent 50%,
          #fff 50%,
          #fff 100%);
    }

    /* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);

    }

    h1 {
      text-align: center;
    }

    button {
      width: 100px;
      height: 40px;
      border-radius: 20px;
      font-size: 18px;
      display: block;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <h1>打地鼠游戏 : <span>0</span></h1>
  <button>开始</button>
  <ul>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
  </ul>
  <script>

    const btn = document.querySelector('button')
    const lis = document.querySelectorAll('li')

    // 点击开始
    btn.addEventListener('click', function () {


      let start = setInterval(function () {

        let random = Math.floor(Math.random() * lis.length)

        lis[random].children[1].classList.add('active')
        
        setTimeout(function () {

          lis[random].children[1].classList.remove('active')

        }, 2000)

      }, 500)

      setTimeout(function () {

        clearInterval(start)

      }, 15000)


    })



    // 打地鼠加分

    let span = document.querySelector(' span')
    let num = 0
    for (let i = 0; i < lis.length; i++) {
      lis[i].addEventListener('click', function (e) {

        if (e.target.className === 'mole active') {
          lis[i].children[1].classList.remove('active')
          num += 1
          span.innerHTML = num
        }
      })

    }



  </script>
</body>

</html>